<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品列表2</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第二步：引入css-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <!--第三步：引入js-->
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<header>
    <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html"><img class="back" src="images/icon_back_n.png"></a>
    <div class="title"> <span style="text-align: center;line-height: .84rem;" class="title">商品列表</span></div>
    <span class="icon_search"><img src="images/search.png"></span>
</header>
<a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%AF%A6%E6%83%851.html" style="width: 100%;height: 1rem">
    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0; position: relative">
        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
            <a href="#" style="display:block;"><img src="images/list02.jpg"  style="width: 1.5rem;height:1.5rem;margin-bottom:10px;"/>
            </a>
        </div>
        <div class="media-body">
            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米4s</h5>
            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>骁龙808处理器/64GB大容量/指纹识别/全网通双卡双待/5英寸屏非凡手感
            </p><p class="price">1699  元起</p></div>
        </div>
    </div>
</a>

<div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
    <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
        <a href="#" style="display:block;"><img src="images/list202.jpg"  style="width:1.5rem;height:1.5rem;margin-bottom:10px;"/></a>
    </div>
    <div class="media-body">
        <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">红米手机3 </h5>
        <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>指纹识别/全网通双卡双待/金属机身/4100mAh
            大电池/3GB内存+32GB容量
        </p><p class="price">899  元起</p></div>
    </div>
</div>
<div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
    <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
        <a href="#" style="display:block;"><img src="images/list203.jpg"  style="width:1.5rem;height:1.5rem;margin-bottom:10px;"/></a>
    </div>
    <div class="media-body">
        <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米Note</h5>
        <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>独立HiFi音乐系统/5.7英寸全高清屏幕/骁龙801四核处理器
        </p><p class="price">1499  元起</p></div>
    </div>
</div>

<div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0; position: relative">
    <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
        <a href="#" style="display:block;"><img src="images/list204.jpg"  style="width:1.5rem;height:1.5rem;margin-bottom:10px;"/>
          </a>
    </div>
    <div class="media-body">
        <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米4s</h5>
        <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>骁龙808处理器/64GB大容量/指纹识别/全网通双卡双待/5英寸屏非凡手感
        </p><p class="price">1699  元起</p></div>
    </div>
</div>

<div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0; position: relative">
    <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
        <a href="#" style="display:block;"><img src="images/list205.jpg"  style="width:1.5rem;height:1.5rem;margin-bottom:10px;"/>
          </a>
    </div>
    <div class="media-body">
        <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米4s</h5>
        <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>骁龙808处理器/64GB大容量/指纹识别/全网通双卡双待/5英寸屏非凡手感
        </p><p class="price">1699  元起</p></div>
    </div>
</div>
<div class="empty1"></div>
</body>

<footer>
    <!--商城-->
    <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">商城</p>

        </section>

    </a>
    <!--分类-->
    <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%88%86%E7%B1%BB.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">分类</p>

        </section>

    </a>
    <!--购物车-->
    <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%B4%AD%E7%89%A9%E8%BD%A6.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">购物车</p>

        </section>

    </a>
    <!--服务-->
    <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">服务</p>

        </section>

    </a>
</footer>
</html>
<script>
    $(function()
    {
        function fullwidth()
        {
            if($('body').width() >= 640)
            {
                $('html').css('font-size',100 + 'px');
                return;
            }
            var scale = $('body').width() / 640;
            $('html').css('font-size',scale * 100 + 'px');
        }
        fullwidth();
        $(window).resize(function()
        {
            fullwidth();
        })
    });
</script>